<template>
  <div class="container flex flex-col items-center " >
    <div class="main-content flex flex-col w-4/5">
      <BarChart1></BarChart1>
      <LineTable></LineTable>
      <LayedBarChart></LayedBarChart>
      <el-card class="m-4">
        <clsTable></clsTable>
      </el-card>
      <el-row>
        <el-col :span="12">
          <el-card class="m-4">
            <RadarChart></RadarChart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="m-4">
            <AnalysisCard></AnalysisCard>
          </el-card>
        </el-col>
      </el-row>
      <el-card class="m-4">
        <StuLevelBarChart></StuLevelBarChart>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import clsTable from '@/components/School/card/classTableCard.vue'
import BarChart1 from '@/components/chart/BarChartStu.vue'
import LineTable from '@/components/School/schoolLineChart.vue'
import RadarChart from '@/components/student/chart/radarChart.vue'
import LayedBarChart from '@/components/School/Chart/LayedBarChart.vue'
import StuLevelBarChart from '@/components/School/Chart/StudentLevelBar.vue'
import AnalysisCard from '@/components/School/card/radarAnalysisCard.vue'
</script>

<style scoped>
.container {
  margin: 0 auto;
  max-width: 2000px; /* 可根据需要调整 */
}
.main-content {
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
